<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="550px"
      title="附件上传"
      append-to-body
    >
      <div class="upload-container" style="max-height:500px;overflow-y:auto;">
        <el-upload
          class="uploadShow"
          :accept="accept"
          ref="upload"
          :action="upload"
          :multiple="multiple"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :before-remove="beforeRemove"
          :file-list.sync="fileList"
          :auto-upload="false"
          style="text-align: center;"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">{{ tip }}</div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="uploadBtn()" :loading="uploading">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'upload-file',
  components: {},
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: '.jpg, .jpeg, .png'
    },
    tip: {
      type: String,
      default: '只支持jpg、png、jpeg格式的图片！'
    }
  },

  data() {
    return {
      innerfileList: [], // 删除之前数据
      fileList: [], // 删除之后数据（渲染数据）
      dialogVisible: false,
      uploading: false
    }
  },
  computed: {
    upload() {
      return this.$http.BASE_URL + `/sys/oss/upload?token=${this.$cookie.get('token')}`
    }
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        // this.findLists()
      }
    }
  },
  methods: {
    open() {
      this.dialogVisible = true
      this.fileList = []
      return this.$nextTick()
    },
    beforeRemove(file, fileList) {
      // // 删除提醒
      // return this.$mess.confirm().then(() => {
      //   this.innerfileList = JSON.parse(JSON.stringify(fileList))
      // })
    },
    handleSuccess(res, file, fileList) {
      let fileData = {url: res.url, fileName: res.original}
      this.fileList = Object.assign([], fileList)
      this.innerfileList = Object.assign([], fileList)
      this.$emit('fileList', fileData)
      this.uploading = false
      this.dialogVisible = false
    },
    handleRemove(file, fileList) {
      // const index = this.innerfileList.findIndex(el => {
      //   return file.uid === el.uid
      // })
      // this.$axios.post('/api/files/del', {
      //   ids: this.defaultfileList[index].id
      // }).then(res => {
      //   if (res.status === 200) {
      //     this.innerfileList.splice(index, 1)
      //     this.defaultfileList.splice(index, 1)
      //     this.fileList.splice(index, 1)
      //     this.$message({
      //       type: 'success',
      //       message: '操作成功'
      //     })
      //   } else {
      //     this.$mess.messagePrompt(res.message, 'error', true, false)
      //   }
      // }).catch(() => {
      // })
    },
    uploadBtn() {
      this.uploading = true
      this.$refs.upload.submit()
    }
  }
}
</script>

<style scoped>
.uploadShow {
}
</style>
